<template>
  <div class="mapBox">
    <div class="header">
      <div class="l1" @click="backTo">
        <span class="icon"></span>
        <span >返回</span>
      </div>
      <div class="r1">
        <span class="rt">{{ time.split(' ')[0] }}</span>
        <span>{{ time.split(' ')[1] }}</span>
      </div>
      <div class="title">地震应急指挥平台</div>
    </div>
    <div class="content">
     <!-- <template v-if="chartFlag"> -->
   
   
      <div class="leftbox">
        <div class="l-1">
          <leftone ref="left1" />
        </div>
        <div class="l-2">
          <lefttwo ref="left2" />
        </div>
        <div class="l-3">
          <leftthree ref="left3" />
        </div>
      </div>
      <div class="centerbox">
        <centers ref="center" @updateCity="updateCity" />
      </div>
      <div class="rightbox">
        <div class="rtitle">近5年成灾情况趋势({{ currentYear - 4 }}-{{ currentYear }})</div>
        <div class="l-1">
          <rightone ref="right1" />
        </div>
        <div class="l-2">
          <righttwo ref="right2" />
        </div>
        <div class="l-3">
          <rightthree ref="right3" />
        </div>
      </div>
        <!-- </template> -->
    </div>
  </div>
</template> 
    <script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import { getIndex, getDisasterSituation } from '../api/bigscreen'
import { useRouter, useRoute } from 'vue-router'
import useTime from '../hook/useTime'
import topCom from '../layer/header.vue'
import leftone from './components/leftone.vue'
import lefttwo from './components/lefttwo.vue'
import leftthree from './components/leftthree.vue'
import rightone from './components/rightone.vue'
import righttwo from './components/righttwo.vue'
import rightthree from './components/rightthree.vue'
import centers from './components/center.vue'

const route = useRoute()
const router = useRouter()
const querydata = JSON.parse(route.query.data)
querydata.province = ''
const time = useTime()
const chartFlag = ref(true);

const date = new Date()
const currentYear = date.getFullYear()
const month = date.getMonth() + 1

const left1 = ref(null)
const left2 = ref(null)
const left3 = ref(null)
const right1 = ref(null)
const right2 = ref(null)
const right3 = ref(null)
const center = ref(null)

const backTo = () => {
  router.go(-1)
}

const updateCity = (name) => {
  querydata.province = name;
  chartFlag.value = false;
  setTimeout(() => {
    chartFlag.value = true;
  initData()

  }, 0);
}

const initData = () => {
    getIndex(querydata).then((e) => {
    var data = e
    left1.value.getData(data.statisticsVoList)
    left2.value.getData(data.chartData)
    left3.value.getData(data.statisticsVoList)
    center.value.getData(data.distributionVoList, data.chartData, querydata)
  })

  const disasterSituation = {
    endTime: querydata.yearRange[1],
    startTime: querydata.yearRange[0],
    province: querydata.province
  }
  getDisasterSituation(disasterSituation).then((e) => {
    var dc = e
    right1.value.getData(dc)
    right2.value.getData(dc)
    right3.value.getData(dc)
  })
}

onMounted(() => {
initData()
})
</script>
    <style lang="scss" scoped>
.mapBox {
  width: 100vw;
  height: 100vh;
  background-image: url(/static/assets/chartbg.png);
}

.header {
  width: 100%;
  height: 8.611111vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background-image: url(/static/assets/charth.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .l1 {
    width: 92px;
    height: 36px;
    background-image: url(/static/assets/tbtn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 20px;
    top: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #01c2ff;
    line-height: 24px;
    cursor: pointer;
    .icon {
      width: 24px;
      height: 24px;
      background-image: url(/static/assets/ow.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 8px 0 16px;
    }
  }
  .r1 {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 2.22222vh;
    font-weight: bold;
    line-height: 2.96296vh;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 0.87);
    text-shadow: 0px 0px 13px rgba(27, 126, 242, 0.91);
    .rt {
      color: #45a2ff;
      margin-right: 40px;
    }
  }
  .title {
    height: 100%;
    font-size: 4.8148vh;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5.67px;
    background: linear-gradient(0deg, #87daff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
  }
}
.content {
  height: calc(100% - 8.611111vh);
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  display: flex;
  .leftbox {
    width: 23.89%;
    height: 100%;
    .l-1,
    .l-2,
    .l-3 {
      height: calc(33.33% - 6.666666666666667px);
      background-image: url(/static/assets/chartbox.png);
      background-repeat: no-repeat;
    }
    .l-2,
    .l-3 {
      margin-top: 10px;
    }
  }
  .rightbox {
    width: 23.89%;
    height: 100%;
    .l-1,
    .l-2,
    .l-3 {
      height: calc(33.33% - 21.666px);
      background-image: url(/static/assets/rrange.png);
      background-repeat: no-repeat;
    }
    .l-2,
    .l-3 {
      margin-top: 12px;
    }
    .rtitle {
      height: 41px;
      color: #fff;
      line-height: 41px;
      font-size: 18px;
      padding-left: 26px;
      font-weight: bold;
      background-image: url(/static/assets/ctitle.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .centerbox {
    width: 52.22%;
    height: 100%;
  }
}
</style>
    
    